<!--  -->
<template>
  <div>
    电解镍一分区
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="expand">
        <template slot-scope="props"> </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"> </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="描述" prop="desc"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件、工具js、)
//例如：import 组件名 from '组件路径'
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
          // children: [
          //   {
          //     id: "1sdfas22"
          //   },
          //   {
          //     id: "12sdfa22"
          //   }
          // ]
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        }
      ],
      ramPercentage: 0
    };
  },

  components: {},

  computed: {},

  beforeDestroy() {
    if (this._timeOut) {
      clearInterval(this._timeOut);
    }
  },

  mounted() {
    // this.JobsetIntervals();
    this._timeOut = setInterval(() => {
      this.ramPercentage = Math.floor(Math.random() * 100 + 1);
      console.log(this.ramPercentage);

      // if (this.ramPercentage > 60) {
      //   this.warningCPU();
      // }
    }, 5000);
  },
  // beforeDestroy() {
  //   if (this.timer) {
  //     //如果定时器还在运行 或者直接关闭，不用判断
  //     clearInterval(this.timer); //关闭
  //   }
  // },

  methods: {
    //定时器随机数值用于报警
    // JobsetIntervals() {
    //   let randomTest = setInterval(() => {
    //     this.ramPercentage = Math.floor(Math.random() * 100 + 1);
    //     console.log(this.ramPercentage);
    //   }, 5000);
    // },
    warningCPU(value) {
      // this.$notify({
      //   title: "报警信息",
      //   message: "CPU使用率超过85%",
      //   type: "warning"
      // });
      this.$notify({
        title: "警告",
        message: value,
        type: "warning"
      });
    },
    test(value) {
      alert(value);
    },
    pushSmsMessage() {
      console.log("发信钉钉短信消息准备....");
      // this.$http
      //   .post("http://gxcx.jnmc.com:8888/sendActionCardMsg", {
      //     userList: "854805",
      //     title: "警告通知！",
      //     markdown: "sdfasdfas",
      //     single_title: "警告通知！",
      //     single_url: "http://zdh.jnmc.com"
      //   })
      //   .then(res => {

      //   });
    }
  },
  //监听
  watch: {
    ramPercentage(value, oldValue) {
      console.log("watch监听数值变化:", value, oldValue);
      if (value > 30) {
        this.pushSmsMessage();
        this.$nextTick(() => {
          this.warningCPU(value);
        });
      }
    }
  }
  //生命周期 - 创建完成（可以访问当前this实例）
  // created: {}
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
